<template>
	<div id="mainportal" style="width:100%;height:100vh;overflow:hidden;background-color:#fff;position: fixed;bottom: 0;top:0;">

		<comhead title="车型选择" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
		<div class='carBar'>
			<div class="carBar-items lineTwo " :class="tabrId==='1'&& !defauCarId ?'carBar-items_select':''" style="width:25%" :style="tabrId==='1'&& !defauCarId ?'border-bottom: solid #fff 1px;':''" @click="changeTabrId('1')">
				<span class='textFont'>{{brand}}</span>
			</div>
			<div class="carBar-items lineTwo " :class="tabrId==='2'&& !defauCarId ?'carBar-items_select':''" style="width:25%;border-left: solid  1px #e5e5e5;" :style="tabrId==='2'&& !defauCarId ?'border-bottom: solid #fff 1px;':''" @click="changeTabrId('2')">
				<span class='textFont'>{{series}}</span>
			</div>
			<div class="carBar-items lineTwo " :class="tabrId==='3'&& !defauCarId ?'carBar-items_select':''" style="flex:1;border-left: 1px solid #e5e5e5;" :style="tabrId==='3'&& !defauCarId ?'border-bottom: solid #fff 1px;':''" @click="changeTabrId('3')">
				<span class='textFont'>{{automobile}}</span>
			</div>
		</div>

		<div style='  position: fixed;width:100%;background-color:#fff;padding:14px 0 ;z-index:999;margin-top:42px;'>
			<div class='filterBox'>
				<img src='../../image/210.png' style='width:20px;height:20px;margin-left:5px; line-height: 31px;' />
				<input style='flex:1;margin:0 36px 0 5px; line-height: 31px;' v-model="brandFilterInput" maxlength="11" placeholder="快速搜索" class='inputBox' @input='changeInputBrand()' />

				<div @click='brandClear' style='z-index:999;width:31px;height:31px;position: absolute;right: 0;top: 0; display: flex;align-items: center;justify-content: center;'>
					<img src="../../image/cha.png" style='width:18px;height:18px;' v-if="brandFilterInput!==''" />
				</div>
			</div>
		</div>

		<!--品牌页面  -->

		<div style="  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  padding-top: 42px;" v-if="tabrId==='1' && !defauCarId">

			<mt-index-list style="    margin-top: 30px;">
				<div v-for=" catfun in bsmList">
					<mt-index-section  
						v-for=" (cartType,idx) in catfun" 
						v-if="!catfun[idx][catfun[idx].length-1].count" 
						:index="idx == 'hot'?'热':idx" :style="idx == 'hot' ?'margin-top:85px':''">
						<div class='typeBox'>
							<div v-for=" (cartType1,carTypeIndex) in  cartType" :style="$store.getters.getMerchant.cascader?'width:100%;padding:10px ;border-bottom: solid 1px #e5e5e5;':'width:25%;padding-top:10px;'" @click='selectBrand(cartType1)' v-if="!cartType1.hide">
								<div style='display:flex;align-items:center;justify-content: center;'>
									<img :src='cartType1.icon' style='width:50px;height:50px' v-if="!$store.getters.getMerchant.cascader" />
								</div>
								<div style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap; " :style="$store.getters.getMerchant.cascader?'text-align: left':'text-align: center'"> {{cartType1.brandName}}</div>
							</div>
						</div>
					</mt-index-section>
				</div>

			</mt-index-list>

		</div>

		<!--车系页面  -->
		<div class="series" v-if="tabrId==='2' && !defauCarId">
			<div style='height: 40px;  font-size: 14px;'></div>
			<div>
				<div style='  position: fixed;width:100%;background-color:#fff;padding:14px 0 ;    margin-top: 2px;z-index:999;'>
					<div class='filterBox'>
						<img src='../../image/210.png' style='margin-left:5px;width:20px;height:20px; line-height: 31px;' />
						<input style='flex:1;margin:0 36px 0 5px; line-height: 31px;' maxlength="11" placeholder="快速搜索" class='inputBox' @input='changeInputSeries()' v-model="seriesFilterInput" />
						<div @click='seriesClear' style='z-index:999;width:31px;height:31px;position: absolute;right: 0;top: 0; display: flex;align-items: center;justify-content: center;'>
							<img src="../../image/cha.png" style='width:18px;height:18px;' v-if="seriesFilterInput!==''" />
						</div>
					</div>
				</div>
				<div style='height: 50px;  font-size: 14px;'></div>

				<div class='typeBox' style=' '>

					<!-- data-id='{{cartType1.id}}'
        data-brandid='{{cartType1.brandId}}' data-name="{{cartType1.seriesName}}" -->
					<div v-for="cartType1 in bsmSeriesList" @click='selectSeries(cartType1)' v-if="!cartType1.hide" style="width:25%;padding:10px 0;" :style="$store.getters.getMerchant.cascader?'width:100%;padding:10px ;border-bottom: solid 1px #e5e5e5;':'width:25%;padding:10px 0;'">
						<div style='display:flex;align-items:center;justify-content: center;'>
							<img :src='cartType1.icon' style='width:50px;height:50px' v-if="!$store.getters.getMerchant.cascader" />
						</div>

						<div style=" overflow:hidden;text-overflow: ellipsis;white-space: nowrap;  text-align: center" :style="$store.getters.getMerchant.cascader?'text-align: left':'text-align: center'"> {{cartType1.seriesName}}</div>
					</div>
				</div>
			</div>

		</div>

		<!--车型页面  -->
		<div v-if="tabrId==='3' && !defauCarId" style='overflow: hidden;'>
			<div style='height: 40px;  font-size: 14px;'></div>

			<!-- flex:1; -->
			<div style='  position: fixed;width:100%;background-color:#fff;padding:14px 0 ;margin-top:2px;z-index:999;'>

				<div class='filterBox'>
					<img src='../../image/210.png' style='margin-left:5px;width:20px;height:20px; line-height: 31px;' />
					<input style='flex:1;margin:0 18px 0 5px; line-height: 31px;' maxlength="11" placeholder="快速搜索" class='inputBox' @input='changeInputModel()' v-model="modelFilterInput" />

					<div @click='modelClear' style='z-index:999;width:31px;height:31px;position: absolute;right: 0;top: 0; display: flex;align-items: center;justify-content: center;'>
						<img src="../../image/cha.png" style='width:18px;height:18px;' v-if="modelFilterInput!==''" />
					</div>
				</div>
			</div>
			<!-- <div style='  font-size: 14px;'></div> -->

			<div style='height:85vh;width:100%;display:flex;margin-top:67px;'>

				<div class="classify-container">

					<div v-for="(classify,activeindex) in bsmAutomobileList" wx:key="id" @click='classifySelete(activeindex)'>
						<div  v-for="(itemObj,idx) in classify" class="classify " 
							v-if="!classify[idx][classify[idx].length-1].count && !li_module" 
							:class="classifySeleted==activeindex?'active':''" :style="classifySeleted==activeindex?'color:'+ $store.getters.getMerchant.themeColors +';border-left:'+ $store.getters.getMerchant.themeColors +' 5px solid;':''">

							<div class="name">{{idx}} </div>
						</div>
						<div  v-for="(itemObj,idx) in classify" class="classify " v-if="!classify[idx][classify[idx].length-1].count && li_module" :class="classifySeleted==activeindex?'le_active':''" :style="classifySeleted==activeindex?'color:'+ $store.getters.getMerchant.themeColors +';border-left:'+ $store.getters.getMerchant.themeColors +' 5px solid;':''">

							<div class="name">{{idx}} </div>
						</div>
					</div>
				</div>

				<div class="goods-container">
					<div v-for="(classify,index) in classifyContent" class="goods-container1">
						<!-- style="$store.getters.getMerchant.cascader ?'padding:30px 0':''" -->
						<!-- data-id='{{itemObj.id}}' -->

						<div v-for="itemObj in classify" class='contentBox' @click='selectAutomobile(itemObj)' :style="cascader ?'padding:15px 0':''" v-if="!itemObj.hide">
							<img :src='itemObj.icon' style='  width: 100px;height: 72px;margin-right:5px' v-if="!$store.getters.getMerchant.cascader" />

							<div style='flex:1;display: flex;align-items: center;'>
								<div>
									<div>
										<span style='color:#FD7D31'>   {{itemObj.engine}}</span>
										<span class='lineTwo'>   {{itemObj.modelName}}</span>
									</div>

									<div 
										:style="'color:'+ $store.getters.getMerchant.themeColors"
										style='color:#1973bf;bottom:5px;' v-if="!$store.getters.getMerchant.cascader && !li_module">
										参考价:￥
										<span style='margin-right:5px'>{{itemObj.price}}</span>万
									</div>
									<div 
										:style="'color:'+ $store.getters.getMerchant.themeColors"
										style='color:#36A740;bottom:5px;' v-else>
										参考价:￥
										<span style='margin-right:5px'>{{itemObj.price}}</span>万
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
	import { Indicator } from "mint-ui";
	import { Tabbar, TabItem } from "mint-ui";
	import { TabContainer, TabContainerItem } from "mint-ui";
	import comhead from "../../common/coffee/Comhead";

	export default {
		data() {
			return {
				themeColors: "",
				icon:'',
				li_module: false,
				modelFilterInput: "",
				brandFilterInput: "",
				seriesFilterInput: "",
				defauCarId: "",
				cascader: false, //是否启动无图标体验效果模式
				hidden: true,
				tabrId: "1",
				brand: "品牌",
				series: "车系",
				automobile: "车型",
				isHaveCar: false,
				goodsList: [{
					id: "hot",
					classifyName: "热销",
					goods: [1, 2, 3, 4, 5]
				}],
				bsmList: [],
				bsmSeriesList: [],
				bsmAutomobileList: [],
				carIndexList: {
					hot: {
						hide: false
					},
					A: {
						hide: false
					},
					B: {
						hide: false
					},
					C: {
						hide: false
					},
					D: {
						hide: false
					},
					E: {
						hide: true
					},
					F: {
						hide: false
					},
					G: {
						hide: false
					},
					H: {
						hide: false
					},
					I: {
						hide: false
					},
					J: {
						hide: false
					},
					K: {
						hide: false
					},
					L: {
						hide: false
					},
					M: {
						hide: false
					},
					N: {
						hide: false
					},
					O: {
						hide: false
					},
					P: {
						hide: true
					},
					Q: {
						hide: false
					},
					R: {
						hide: false
					},
					S: {
						hide: false
					},
					T: {
						hide: false
					},
					W: {
						hide: false
					},
					X: {
						hide: false
					},
					Y: {
						hide: false
					},
					Z: {
						hide: false
					}
				},
				classifySeleted: 0, //选中的年份上级节点的下标
				classifyContent: [],
				pageType: "add"
			};
		},
		computed: {},

		methods: {
			modelClear() {
				this.modelFilterInput = "";
				this.changeInputModel();
			},

			changeInputModel(e) {
				if(this.modelFilterInput === "") {
					//当空字符时还原
					this.bsmAutomobileList.forEach((item, brandIndex) => {
						for(let opt in item) {
							let count = false;

							item[opt].forEach((cat, catIndex, arr) => {
								if(cat.modelName) {
									this.classifyContent = this.bsmAutomobileList[
										this.classifySeleted
									];
									count = false;
									Object.assign(cat, {
										hide: count
									});
								} else {
									arr[catIndex] = {
										hide: true,
										count: count
									};
								}
							});
						}
					});
				} else {
					let initSelect = true;
					this.bsmAutomobileList.forEach((item, brandIndex) => {
						for(let opt in item) {
							let count = true;
							item[opt].forEach((cat, catIndex, arr) => {
								if(cat.modelName) {
									if(cat.modelName.indexOf(this.modelFilterInput) !== -1) {
										//分组选择的时候  筛选   选中第一个结果的年份
										if(initSelect) {
											this.classifySeleted = brandIndex;
											initSelect = false;
										}
										count = false;
									}
									Object.assign(cat, {
										hide: cat.modelName.indexOf(this.modelFilterInput) === -1
									});
								} else {
									arr[catIndex] = {
										hide: true,
										count: count
									};
								}
							});

							if(item[opt][item[opt].length - 1].modelName) {
								item[opt][item[opt].length] = {
									hide: true,
									count: count
								};
							}
						}
					});
				}

				this.classifyContent = this.bsmAutomobileList[this.classifySeleted];
			},

			seriesClear() {
				this.seriesFilterInput = "";
				this.changeInputSeries();
			},
			changeInputSeries() {
				this.bsmSeriesList.forEach((item, brandIndex) => {
					Object.assign(item, {
						hide: item.seriesName.indexOf(this.seriesFilterInput) === -1
					});
				});
			},

			brandClear() {
				this.brandFilterInput = "";
				this.changeInputBrand();
			},
			//品牌搜索
			changeInputBrand() {
				this.bsmList.forEach((item, brandIndex) => {
					for(let opt in item) {
						let count = true;
						item[opt].forEach((cat, catIndex, arr) => {
							if(cat.brandName) {
								cat.brandName.indexOf(this.brandFilterInput) !== -1 ?
									(count = false) :
									"";
								Object.assign(cat, {
									hide: cat.brandName.indexOf(this.brandFilterInput) === -1
								});
							} else {
								//第N次给索引赋隐藏值
								// A:{ ... , { hide: true,count: count}}

								this.carIndexList[opt].hide = count;
								arr[catIndex] = {
									hide: true,
									count: count
								};
							}
						});
						//第一次给索引赋隐藏值
						// A:{ ... }
						if(item[opt][item[opt].length - 1].brandName) {
							this.carIndexList[opt].hide = count;
							item[opt][item[opt].length] = {
								hide: true,
								count: count
							};
						}
						// A:{ ... , { hide: true,count: count}}Mer5b10b6cedb573c72d45b5c03
					}
				});
			},
			changeTabrId(e) {
				
				if(e == '1'){
					if(this.$store.getters.getMerchant.merchantId == 'Mer5af261c3db573c5063f0fdf4' || this.$store.getters.getMerchant.merchantId == 'Mer5b10b6cedb573c72d45b5c03' || this.$store.getters.getMerchant.merchantId == 'Mer5ab5c8abdb573c06b88de8a9'){
						
						
						setTimeout(()=>{
							let attr = document.getElementsByTagName('p')
							attr[0].style.background = this.$store.getters.getMerchant.themeColors
			                attr[0].style.color = '#fff'
			                let list = []
			                for(let i = 1; i<attr.length;i++){
			                	list.push(attr[i].innerHTML)
			                	attr[i].innerHTML = ''
			                }
			                for(let i = 1; i<attr.length;i++){
			                	let span = document.createElement('span')
			                	span.innerHTML =list[i-1] 
			                	span.className = 'liSpan'
			                	span.style.background = this.$store.getters.getMerchant.themeColors
			                	attr[i].appendChild(span)
			                }
			                
			               
						},10)
					}
				}
				if((e === "2" || e === "3") && e !== "1" && this.brand === "品牌") {
					MessageBox.alert("请选择一款品牌");
					return;
				}
				if(e === "3" && this.series === "车系") {
					MessageBox.alert("请选择一款车系");
					return;
				}

				this.tabrId = e;
			},
			// 选择车型年份
			classifySelete(activeindex) {
				this.classifySeleted = activeindex;
				this.classifyContent = this.bsmAutomobileList[activeindex];
			},
			//选择车系
			selectSeries(e) {
				(this.tabrId = "3"), (this.series = e.seriesName);
				this.classifySeleted = 0;
				this.getBsmList(e.brandId, e.id);
			},
			// 选择品牌
			selectBrand(e) {
				(this.tabrId = "2"), (this.brand = e.brandName), (this.series = "车系");
				this.getBsmList(e.id);
			},
			goSign() {
				this.$router.push({
					name: "sign"
				});
			},
			foBack() {
				this.$router.go(-1);
			},

			// 获取数据
			getBsmList: function(...args) {
				let self = this;
				let url = this.$baseUrl.sizUrl + "/bsm";
				let data = {};
				if(this.tabrId === "1") {
					data = {
						merchantId: this.$store.getters.getMerchant.merchantId,
						brandId: "",
						seriesId: ""
					};
				} else if(this.tabrId === "2") {
					data = {
						merchantId: this.$store.getters.getMerchant.merchantId,

						brandId: args[0],
						seriesId: ""
					};
				} else if(this.tabrId === "3") {
					data = {
						merchantId: this.$store.getters.getMerchant.merchantId,
						brandId: args[0],
						seriesId: args[1]
					};
				}
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}
					if(res.status != 200) {
						console.log("请求数据错误");
						return;
					}

					if(res.status === 200) {
						if(self.tabrId === "1") {
							this.bsmList = res.data.data;
							if(self.defauCarId) {
								self.getDefaultCarItem(self.defauCarId);
							}
						} else if(self.tabrId === "2") {
							this.bsmSeriesList = res.data.data;
							if(self.defauCarId) {
								self.getDefaultCarItem(self.defauCarId);
							}
						} else {
							let bsmAutomobileList = [];
							for(let i = 0; i < res.data.data.length; i++) {
								bsmAutomobileList.push(res.data.data[i]);
							}
							if(bsmAutomobileList.length > 0) {
								this.classifyContent = bsmAutomobileList[self.classifySeleted];
							}
							this.bsmAutomobileList = bsmAutomobileList;
							console.log(this.bsmAutomobileList)
							if(self.defauCarId) {
								self.getDefaultCarItem(self.defauCarId);
							}
						}
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			//达到默认已选择效果
			getDefaultCarItem(carId) {
				let self = this;
				let url = this.$baseUrl.sizUrl + "/bsm";
				let data = {
					merchantId: this.$store.getters.getMerchant.merchantId,
					modelId: carId
				};
				//发起网络请求
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.status != 200) {
						console.log("请求数据错误");
						return;
					}
					if(res.status === 200) {
						console.log("默认选择车型", res.data.data);

						(this.brand = res.data.data.brandName),
						(this.series = res.data.data.seriesName);
						console.log(this.tabrId);
						if(this.tabrId === "1") {
							self.selectBrand({
								brandName: res.data.data.brandName,
								id: res.data.data.brandId
							});
						} else if(this.tabrId === "2") {
							self.selectSeries({
								seriesName: res.data.data.seriesName,
								id: res.data.data.seriesId,
								brandid: res.data.data.brandId
							});
						} else if(this.tabrId === "3") {
							this.defauCarId = false;
							let opt = 0;

							this.bsmAutomobileList.forEach((item, index) => {
								for(let n in item) {
									if(res.data.data.years === n) {
										console.log(index);
										opt = index;
									}
								}
							});
							self.classifySelete(opt);
						}
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			selectAutomobile(e) {
				let stroge = window.localStorage;
				stroge.carId = e.id;
				console.log(e)
				this.icon = e.icon
				
				// app.globalData.carId = e.id;

				if(this.$store.getters.getLoginStatus.userId || "" == "") {
					// wx.redirectTo({
					//   url: "../category/category",
					//   success: function(res) {},
					//   fail: function(res) {},
					//   complete: function(res) {}
					// });
					console.log("跳到分类车型页");
					console.log(e)
					if(this.$route.query.pageName && this.$route.query.pageName == 'upload'){
						this.$router.push({
							name: "uploadRecord",
							query: {
								brandName: e.brandName,
								seriesName: e.seriesName,
								modelName: e.modelName,
								carId: e.id
							}
						});
						return
					}
					if(this.li_module){
						this.goPage(e.id)
					}else{
						this.$router.push({
							name: "category"
						});
					}
					
					return;
				}

				console.log("选择了车型ID");

				let self = this;
				let url = this.$baseUrl.sizUrl + "/user/defaultcar";

				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId,
					carId: e.id
				};
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}
					if(res.data.status != 200) {
						console.log("请求数据错误");
						return;
					}
					// firstHaveCar 第一次循环回来选择

					console.log("跳到分类车型页");
					if(this.li_module){
						this.goPage(e.id)
					}else{
						this.$router.push({
							name: "category"
						});
					}
					
				};
				this.$reqFormPost(url, data, callBack);
			},
			goPage(carId){
				let url = this.$baseUrl.sizUrl+ '/merchant/catlist'
	    	 	let data = {
			      	merchantId: this.$store.getters.getMerchant.merchantId,
		      		modelId: carId
		    	}
    	 		let self = this
    	 		let callBack = (res) => {
			      console.log(res)
			      if (res == null) {
			        console.log("网络请求错误！");
			        return;
			      }
			      if (res.status != 200) {
			        console.log("请求数据错误");
			        return;
			      }
			      if (res.status === 200) {
			        let selfs = self
			        console.log(selfs)
			        // 当前只有一个分类且当前只有一个商品
			        console.log(res.data.data.goodsCount[res.data.data.children[0].catId])
			        console.log(res.data.data.children.length)
			        if (res.data.data.children.length == 1 && res.data.data.goodsCount[res.data.data.children[0].catId] === 1) {
			          // 请求获取商品id
			          
			          let goodsUrl = selfs.$baseUrl.bizUrl + '/goods/front/list'
			
			          let datas = {
			            merchantId: selfs.$store.getters.getMerchant.merchantId,
			            userId: selfs.$store.getters.getLoginStatus.userId ? selfs.$store.getters.getLoginStatus.userId: '',
			            firstCatId: res.data.data.children[0].parentId,
			            secCatIds: res.data.data.children[0].catId,//二级分类id
			            carId: carId
			          }
			
			          let callBacks = (result) => {
			            let targetSelf = selfs
			            console.log(targetSelf)
			            if (result == null) {
			              console.log("网络请求错误！");
			              return;
			            }
			            if (result.status != 200) {
			              console.log("请求数据错误");
			              return;
			            }
			            console.log(result.data.data.length)
			            if (result.data.data.length > 0) {
			            	
								console.log(result.data.data[0].goodsId,carId,targetSelf.icon)
								
								targetSelf.$router.push(
					              "/liDetail?id=" +
					                result.data.data[0].goodsId  +
					                "&carId=" +
					                carId+
					                "&icon="+
					                targetSelf.icon
					            );
					            
//					            if(targetSelf.$store.getters.getMerchant.merchantId == 'Mer5ab5c8abdb573c06b88de8a9'){
//					            	targetSelf.$router.push(
//					            	  "/productdetail?id=" +
//					            	    result.data.data[0].goodsId +
//					            	    "&carId=" +
//					            	    carId+
//					            	    "&icon="+targetSelf.icon
//					            	);
//								}
			
			            }
			          }
			          selfs.$reqFormPost(goodsUrl, datas, callBacks)
			        } else {
			         
			          selfs.$router.push({ name: "category" })
			         
			        }
		      }
		    }
    	  		this.$reqFormPost(url, data, callBack)  
			}
		},
		mounted() {
			document.title = "车型选择";
			this.getBsmList();
			// Mer5b42c004db573c56a0d4d643
			if(this.$store.getters.getMerchant.merchantId == 'Mer5af261c3db573c5063f0fdf4' || this.$store.getters.getMerchant.merchantId == 'Mer5ab5c8abdb573c06b88de8a9' || this.$store.getters.getMerchant.merchantId == 'Mer5b10b6cedb573c72d45b5c03' || this.$store.getters.getMerchant.merchantId == 'Mer5ab5c8abdb573c06b88de8a9') {
				this.li_module = true
			}
			console.log(222)
			console.log(this.$route.query)
			// 如果当时是从上传养护
			console.log(this.themeColors)

			if(this.$store.getters.getMerchant.merchantId == 'Mer5af261c3db573c5063f0fdf4' || this.$store.getters.getMerchant.merchantId == 'Mer5b10b6cedb573c72d45b5c03' || this.$store.getters.getMerchant.merchantId == 'Mer5ab5c8abdb573c06b88de8a9'){
				setTimeout(()=>{
					let attr = document.getElementsByTagName('p')
					attr[0].style.background = this.$store.getters.getMerchant.themeColors
	                attr[0].style.color = '#fff'
	                let list = []
	                for(let i = 1; i<attr.length;i++){
	                	list.push(attr[i].innerHTML)
	                	attr[i].innerHTML = ''
	                }
	                for(let i = 1; i<attr.length;i++){
	                	let span = document.createElement('span')
	                	span.innerHTML =list[i-1] 
	                	span.className = 'liSpan'
	                	span.style.background = this.$store.getters.getMerchant.themeColors
	                	attr[i].appendChild(span)
	                }
	                
	               
				},1000)
			}
			
			
			if(this.$route.query.carId) {
				this.defauCarId = this.$route.query.carId;
			} else {
				this.defauCarId = false;
			}
			
			
		},
		components: {
			Tabbar,
			TabItem,
			TabContainer,
			TabContainerItem,
			comhead,
			Swipe,
			SwipeItem
		}
	};
</script>
<style>
	.carBar {
		font-size: 14px;
		display: flex;
		position: fixed;
		width: 100%;
		z-index: 999;
		border-top: solid #e5e5e5 1px;
		border-left: solid #e5e5e5 1px;
		border-right: solid #e5e5e5 1px;
	}
	.liSpan{
		background: #36A740;
		color: #fff;
		padding: 3px;
	}
	
	.filterBox {
		height: 31px;
		position: relative;
		border: 1px #e5e5e5 solid;
		margin: 0 10px;
		display: flex;
		align-items: center;
		background-color: #f4f4f4;
		font-size: 14px;
		border-radius: 5px;
	}
	
	.contentBox {
		display: flex;
		margin-left: 10px;
		padding: 10px 10px 10px;
		font-size: 12px;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.list_tit {
		border-top: 1px #e5e5e5 solid;
		border-bottom: 1px #e5e5e5 solid;
		margin-top: 20px;
		display: block;
		line-height: 30px;
		height: 30px;
		padding-left: 15px;
		font-size: 14px;
		background: #f5f5f5;
		color: #666;
	}
	
	.textFont {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		padding: 0 20px;
	}
	
	.lineTwo {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.carBar-items {
		border-bottom: solid #e5e5e5 1px;
		line-height: 1.5;
		background-color: #f5f5f5;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
	}
	.mint-indexsection>.mint-indexsection-inde{
		
	}
	.mint-indexsection-inde{
		background-color: #36A740 !important;
	}
	
	.carBar-items_select {
		background-color: #fff;
		border: 0;
	}
	
	.classify-container {
		box-sizing: border-box;
		width: 90px;
		background: #f5f5f5;
		height: 100%;
		border-right: 1px solid #e5e5e5;
		overflow: auto;
	}
	
	.classify-container .classify {
		padding: 15px 10px;
		text-align: center;
		margin-right: -2px;
		/* border-left: #f5f5f5 10px solid; */
		color: #646464;
	}
	
	.classify-container .classify.active {
		background: #fff;
		border-right: #fff 1px solid;
	}
	.classify-container .classify.le_active {
		background: #fff;
		border-right: #36A740 1px solid;
		color: #36A740;
	}
	
	
	.classify-container .classify .name {
		display: inline-block;
		font-size: 15px;
		line-height: 1.2;
		text-align: left;
		pointer-events: none;
	}
	
	.goods-container {
		-webkit-flex: 1;
		background: #fff;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.goods-container1 {
		-webkit-overflow-scrolling: touch;
	}
	
	.goods-container .title {
		padding: 20px 25px;
		color: #646464;
		font-size: 30px;
		line-height: 30px;
		background: #f7f7f7;
	}
	
	.goods-container .goods {
		position: relative;
		padding: 20px 30px;
		font-size: 36px;
		line-height: 40px;
		border-bottom: 1px solid #f7f7f7;
	}
	
	.goods-container .goods .pic {
		float: left;
		width: 130px;
		height: 130px;
		margin-right: 20px;
	}
	
	.goods-container .goods .name {
		color: #000;
		font-size: 36px;
		line-height: 46px;
	}
	
	.goods-container .goods .sold {
		color: #989898;
		font-size: 30px;
		line-height: 46px;
	}
	
	.goods-container .goods .price {
		color: #f45044;
		font-size: 36px;
		line-height: 46px;
	}
	
	.goods-container .goods .addCart {
		position: absolute;
		right: 30px;
		bottom: 30px;
		width: 80px;
		height: 80px;
		background: #feb70f;
		border-radius: 50%;
	}
	
	.goods-container .goods .addCart image {
		pointer-events: none;
		position: absolute;
		left: 25px;
		top: 25px;
		width: 30px;
		height: 30px;
	}
	
	.cart-detail,
	.cart-detail .mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	
	.cart-detail .mask {
		background: rgba(0, 0, 0, 0.7);
	}
	
	.cart-detail .list {
		position: absolute;
		left: 0;
		bottom: 100px;
		width: 100%;
		background: #f7f7f7;
		padding: 30px 0;
	}
	
	.cart-detail .list .item {
		display: -webkit-flex;
		color: #333;
		font-size: 36px;
		line-height: 50px;
		padding: 20px 40px;
	}
	
	.cart-detail .list .item .name {
		-webkit-flex: 1;
	}
	
	.cart-detail .list .item .total {
		width: 120px;
	}
	
	.cart-detail .list .item .reduce,
	.cart-detail .list .item .add {
		font-size: 50px;
		background: #feb70f;
		width: 50px;
		height: 50px;
		text-align: center;
		border-radius: 50%;
	}
	
	.cart-detail .list .item .num {
		width: 50px;
		text-align: center;
		margin: 0 5px;
	}
	
	.cart {
		display: -webkit-flex;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100px;
		background: #fff;
	}
	
	.cart .data {
		-webkit-flex: 1;
		/*border-top: 1px solid #e7e7e7;*/
	}
	
	.cart .data .icon {
		position: absolute;
		left: 40px;
		top: -20px;
		width: 100px;
		height: 100px;
		background: #feb70f;
		border-radius: 50%;
	}
	
	.cart .data .icon image {
		position: absolute;
		left: 15px;
		top: 15px;
		width: 70px;
		height: 70px;
	}
	
	.cart .data .icon .count {
		position: absolute;
		left: 70px;
		top: -10px;
		font-size: 30px;
		line-height: 40px;
		padding: 0 12px;
		color: #fff;
		background: #f45044;
		border-radius: 20px;
	}
	
	.cart .data .total {
		color: #f45044;
		font-size: 36px;
		line-height: 100px;
		padding-left: 160px;
	}
	
	.cart button {
		margin-top: 10px;
		margin-right: 20px;
		width: 200px;
		height: 100%;
		font-size: 36px;
	}
	
	.inputBox {
		background-color: #f5f5f5;
	}
	
	.inputBox::-webkit-input-placeholder {
		/* WebKit, Blink, Edge */
		font-size: 14px;
		text-align: center;
	}
	
	.inputBox:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		font-size: 14px;
		text-align: center;
	}
	
	.inputBox::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		font-size: 14px;
		text-align: center;
	}
	
	.inputBox:-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		font-size: 14px;
		text-align: center;
	}
	/*城市选择 右边*/
	
	.scroll_list {
		background: rgba(0, 0, 0, 0);
		position: fixed;
		height: calc(100% - 100px) / 26;
		width: 40px;
		top: 160px;
		right: 0px;
	}
	
	.scroll_list_chi {
		/* border: 1px blue solid; */
		text-align: center;
		font-size: 13px;
		padding: 1px 0;
	}
	/*显示框*/
	
	.showwords {
		color: #fff;
		width: 80px;
		height: 80px;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 16px;
		line-height: 80px;
		text-align: center;
		font-size: 10vw;
		margin: auto;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 999;
	}
	
	.mint-indexlist-content {
		/* overflow:hidden */
		-webkit-overflow-scrolling: touch;
	}
	
	.typeBox {
		display: flex;
		font-size: 14px;
		width: 100%;
		flex-wrap: wrap;
	}
	
	.series {
		height: 100vh;
		width: 100%;
		overflow: auto;
		position: fixed;
		top: 0;
		-webkit-overflow-scrolling: touch;
	}
	
	.mint-indexlist {}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->